<template>
  <div class="p-20 user-page">
    <div class="tile-card user-info">
      <div class="avatar-warpper">
        <el-avatar src="http://comicui.cn/image/avatar.png" :size="120" />
        <div class="mask">
          <EditTwo class="edit" />
        </div>
      </div>
      <div class="name">Admin</div>
      <div class="signature">哎哟！你干嘛~</div>
      <el-button size="small" round class="mt-10" @click="goSchedule">查看我的日程</el-button>
      <ul class="ul mt-20">
        <li><Cake fill="#7aa82d" /><span>1992-09-09</span></li>
        <li><Male fill="#5889b4" /><span>男</span></li>
        <li><Local fill="#ce6700" /><span>安徽省 • 合肥市 • 经开区</span></li>
        <li><TagOne fill="#9b0000" /><span>HTML、CSS、JavaScript、Vue、Comic Plus</span></li>
      </ul>
      <el-divider />
      <div class="tag-warpper">
        <div class="mb-10 tag-title">用户标签</div>
        <el-space wrap>
          <el-tag>小黑子</el-tag>
          <el-tag>Comic Plus</el-tag>
          <el-tag>鸡脚</el-tag>
          <el-tag>Comic Admin</el-tag>
          <el-tag>自恋狂</el-tag>
          <el-tag>律师函警告</el-tag>
        </el-space>
      </div>
    </div>
    <div class="tile-card user-tabs flex-1">
      <el-tabs v-model="activeNames">
        <el-tab-pane label="列表" :icon="List" name="1">
          <ul class="list">
            <li class="list-item flex" v-for="_ in 8">
              <div class="flex-1 mr-10">
                <div class="list-meta flex">
                  <el-avatar src="http://comicui.cn/image/avatar.png" />
                  <div class="flex-1" style="margin-left: 8px">
                    <div>Name</div>
                    <div class="mt-4">2024-09-29</div>
                  </div>
                </div>
                <div class="mt-10 mb-10">
                  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo, voluptatibus ut veritatis, deleniti
                  quos illum totam, itaque corrupti maxime voluptatum aut impedit laborum. Doloribus odit maxime
                  reprehenderit voluptatem accusantium ex.
                </div>
                <div class="mt-10">
                  <el-button type="primary" text size="small" :icon="Edit">编辑</el-button>
                  <el-button type="warning" text size="small" :icon="More">查看更多</el-button>
                </div>
              </div>

              <el-image style="width: 200px; height: 100px" src="https://picsum.photos/200/100" />
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="卡片" :icon="CardTwo" name="2">
          <el-space wrap class="mt-20">
            <el-card v-for="_ in 8">
              <el-image style="width: 200px; height: 100px" src="https://picsum.photos/200/100" />
              <div style="width: 200px" class="flex mt-10">
                <el-avatar src="http://comicui.cn/image/avatar.png" />
                <div class="pl-10">
                  <div>Name</div>
                  <div style="font-size: 12px; color: #999" class="mt-4">Lorem ipsum dolor sit</div>
                </div>
              </div>
            </el-card>
          </el-space>
        </el-tab-pane>
        <el-tab-pane label="日志" :icon="Notepad" name="3">
          <div class="mt-20 flex">
            <div style="width: 400px">
              <div class="timeline-header">登陆/登出记录</div>
              <div class="pl-10">
                <el-timeline>
                  <el-timeline-item timestamp="2024-09-24" type="primary">
                    <el-tag>登陆</el-tag>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2024-09-24" type="danger">
                    <el-tag type="danger">登出</el-tag>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2024-09-24" type="primary">
                    <el-tag>登陆</el-tag>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2024-09-24" type="primary">
                    <el-tag>登陆（其它IP被挤出）</el-tag>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2024-09-24" type="danger">
                    <el-tag type="danger">登出</el-tag>
                  </el-timeline-item>
                  <el-timeline-item :icon="dots" color="#fff" type="primary">
                    <el-tag type="primary" plain border>当前已登陆</el-tag>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
            <div class="flex-1 record">
              <div class="timeline-header">操作记录</div>
              <el-timeline time-position="top">
                <el-timeline-item timestamp="2024-09-24">
                  <el-card>去广场打篮球了</el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024-09-24">
                  <el-card>去练习室练习唱、跳、Rap</el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024-09-24">
                  <el-card>给粉丝寄了律师函</el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024-09-24">
                  <el-card>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024-09-24">
                  <el-card>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024-09-24">
                  <el-card>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024-09-24">
                  <el-card>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Local, Cake, Male, EditTwo, TagOne, List, CardTwo, Notepad, Edit, More } from '@icon-park/vue-next';
import { ref } from 'vue';
import dots from '@/components/dots/main.vue';
import { useRouter } from 'vue-router';

const activeNames = ref('1');
const router = useRouter();

function goSchedule() {
  router.push({ name: 'personal_schedule' });
}
</script>

<style scoped lang="scss">
.user-page {
  display: flex;
  gap: 20px;

  .user-info {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    height: fit-content;

    .avatar-warpper {
      position: relative;
      overflow: hidden;
      border-radius: 50%;
      display: flex;

      .mask {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        font-size: 24px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.45);
        transform: translateY(100%);
        transition: all 300ms ease-in-out;

        .edit {
          cursor: pointer;
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }

      &:hover {
        .mask {
          transform: translateY(0);
        }
      }
    }

    .name {
      margin: 10px 0;
      font-size: 18px;
      font-weight: 700;
    }
    .signature {
      font-size: 14px;
    }

    .ul {
      width: 100%;
      padding: 0;
      list-style: none;

      li {
        line-height: 28px;
        font-size: 12px;

        > span {
          margin-left: 10px;
          color: #999;
        }
      }
    }

    .tag-warpper {
      width: 100%;

      .tag-title {
        font-size: 14px;
      }
    }
  }
  .user-tabs {
    padding: 10px 20px 40px;

    .list {
      font-size: 14px;

      .list-item {
        padding: 15px 10px;
        border-bottom: 1px solid #eeeeee;
      }
    }

    .timeline-header {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 900;
    }

    .record {
      padding-left: 80px;
      border-left: 1px dashed var(--admin-border-color);
    }
  }
}
</style>
